<template>
    <view class="contaner">
        <!-- 时间范围 -->
        <view class="card">
            <view class="u-flex u-row-between u-col-center" @click="show = true">
                <view class="head">时间范围</view>
                <view class="u-flex u-row-between u-col-center" v-if="startDate">
                    <view class="date-box">{{ startDate }}</view>
                    <view>&ensp; ~ &ensp;</view>
                    <view class="date-box">{{ endDate }}</view>
                </view>
                <view v-else class="u-flex u-row-between u-col-center">
                    <view class="date-box">不限</view>
                    <view>&ensp; ~ &ensp;</view>
                    <view class="date-box">{{ $u.$timeUtil.formatDate(new Date(), 'yyyy-MM-dd') }}</view>
                </view>
            </view>
        </view>
        <!-- 关键词 -->
        <view class="card">
            <view class="u-flex u-row-between u-col-center">
                <view class="head">订单关键词</view>
                <u-input placeholder="请输入要搜索的关键词" v-model="keyword"></u-input>
            </view>
        </view>
        <!-- 订单状态 -->
        <view class="card-2">
            <view class="title">订单状态</view>
            <view class="wrap">
                <u-grid :col="3" :border="false">
                    <u-grid-item v-for="(item, index) in orderStatus" :key="item.id" @click="changeStatusCheck(index)">
                        <view class="btn-check" :class="{ 'btn-checked': status === index }">{{ item.name }}</view>
                    </u-grid-item>
                </u-grid>
            </view>
        </view>
        <view class="card-2">
            <view class="title">订单类型</view>
            <view class="wrap">
                <u-grid :col="3" :border="false">
                    <u-grid-item v-for="(item, index) in types" :key="item.id" @click="changeTypeCheck(index)">
                        <view class="btn-check" :class="{ 'btn-checked': orderType === index }">{{ item.name }}</view>
                    </u-grid-item>
                </u-grid>
            </view>
        </view>
        <view class="card-2">
            <view class="title">支付方式</view>
            <view class="wrap">
                <u-grid :col="3" :border="false">
                    <u-grid-item v-for="(item, index) in payMethods" :key="item.id" @click="changePayTypeCheck(index)">
                        <view class="btn-check" :class="{ 'btn-checked': Paytype === index }"><rich-text :nodes="item.name"></rich-text></view>
                    </u-grid-item>
                </u-grid>
            </view>
        </view>
        <view class="bottom-fixed-bar safe-area-inset-bottom">
            <view class="btns u-flex u-row-between u-col-center">
                <u-button type="d" @click="reset">重置</u-button>
                <u-button type="p" @click="submit">确认</u-button>
            </view>
        </view>
        <u-calendar v-model="show" mode="range" @change="dateChange"></u-calendar>
    </view>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const show = ref(false)

const startDate = ref('')

const endDate = ref('')

const keyword = ref('')

const types = ref([
    { name: '销售订单', id: 6, key: 0 },
    { name: '样品订单', id: 7, key: 1 }
])

const orderStatus = ref([
    { name: '待付款', id: '1', key: 1 },
    { name: '待发货', id: '2', key: 2 },
    { name: '待收货', id: '3', key: 3 },
    { name: '已完成', id: '4', key: 4 },
    { name: '已取消', id: '5', key: 5 }
])
/** 订单状态 */
const status = ref(-1)
/** 订单类型 */
const orderType = ref(0)
/** 支付方式 */
const payMethods = ref([
    { name: `&emsp;微信&emsp;`, id: 8, key: 1 },
    { name: '&ensp;支付宝&ensp;', id: 9, key: 0 },
    { name: '&ensp;云闪付&ensp;', id: 10, key: 4 },
    { name: '线下转账', id: 11, key: 2 },
    { name: '授信支付', id: 12, key: 3 }
])

const Paytype = ref(-1)

const $u = computed(() => {
    return uni.$u
})

const changeStatusCheck = (n: number) => {
    if (status.value == n) status.value = -1
    else status.value = n
}

const changeTypeCheck = (n: number) => {
    uni.$u.toast('目前只支持销售订单')
    // if (orderType.value == n) orderType.value = -1;
    // else orderType.value = n;
}

const changePayTypeCheck = (n: number) => {
    if (Paytype.value == n) Paytype.value = -1
    else Paytype.value = n
}

const reset = () => {
    status.value = -1
    Paytype.value = -1
    keyword.value = ''
    endDate.value = ''
    startDate.value = ''
}

const submit = () => {
    // status.value == -1 时 返回0 表示 查询全部
    // orderType.value == -1
    uni.$emit('orderSearch', {
        page: status.value == -1 ? 0 : orderStatus.value[status.value].key,
        orderType: orderType.value,
        keyword: keyword.value,
        startDate: startDate.value,
        endDate: endDate.value,
        payType: Paytype.value == -1 ? undefined : payMethods.value[Paytype.value].key
    })
    uni.$u.$MRouter.back()
}

const dateChange = (e: any) => {
    endDate.value = e.endDate
    startDate.value = e.startDate
}
</script>

<style scoped lang="scss">
.contaner {
    padding: 20rpx;
    .card {
        background-color: white;
        margin-bottom: 20rpx;
        padding: 20rpx;
        border-radius: 20rpx;
        .head {
            padding: 20rpx;
        }
        .date-box {
            background-color: #f4f4f4;
            padding: 20rpx;
        }
    }
    .card-2 {
        background-color: white;
        padding: 30rpx 20rpx;
        border-radius: 20rpx;
        margin-bottom: 4rpx;
        .title {
            font-weight: bold;
        }
        .wrap {
            .btn-check {
                background-color: #f6f4f4;
                padding: 20rpx 40rpx;
                border-radius: 20rpx;
            }
            .btn-checked {
                background-color: #fff;
                color: $cf-primary;
                box-shadow: 0 0 0 1rpx $cf-primary;
            }
        }
    }
    .bottom-fixed-bar {
        position: fixed;
        width: 100vw;
        bottom: 0;
        left: 0;
        background-color: white;
        .btns {
            padding: 20rpx 0;
            margin: 0 !important;
            & > button {
                width: 45vw;
            }
        }
    }
}
</style>
